<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8" />
    <title>寐闻</title>
    <link href="/image/favicon.ico" rel="shortcut icon" />
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <base target="_blank" />
    <style type="text/css">
        body{margin: 0;
        }
        a{text-decoration: none;}
        a:link{color: black;}
        a:visited{color: black;}
        a:hover{color: red;}
        a:active{color: red;}
        .news{font-family: "Microsoft YaHei";
            font-size: 22px;
            width: 768px;
            margin: 10px auto;
            text-align: left;
            overflow:hidden;
            text-overflow:ellipsis;}
        .news:hover{background-color: #f4f4f4
        }
        .time{
            font-size: 12px;
            color: #AAA;
        }
        .img{
            float: left;
            margin-right: 20px;
            width: 240px;
            height: 160px;
            overflow: hidden;
        }
        .img img{
            width: 100%;
            transition: all 0.8s;
        }
        .img img:hover{
            transform: scale(1.1);
        }
        .preview{
            font-family: "Adobe 宋体 Std L";
            font-size: 14px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;
        }
        @-webkit-keyframes orangellowPulse {
            from { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
            50% { background-color: #ffb515; -webkit-box-shadow: 0 0 18px #ffb515; }
            to { background-color: #fc9200; -webkit-box-shadow: 0 0 9px #333; }
        }
        #loadmore{
            border: hidden;
            color: white;
            font-size: large;
            padding: 8px 38px 8px 38px;
            -webkit-animation-name: orangellowPulse;
            -webkit-animation-duration: 10s;
            -webkit-animation-iteration-count: infinite;
        }
    </style>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        function p(s) {//时间补零
            return s < 10 ? '0' + s: s;
        }
        function formatDate(time) {
            var year=time.getFullYear();
            var month=time.getMonth()+1;
            var date=time.getDate();
            var hour=time.getHours();
            var minute=time.getMinutes();
            //var second=time.getSeconds();
            return year+"-"+month+"-"+date+"   "+p(hour)+":"+p(minute);
        }
        function loadmore() {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            var pageNum = document.getElementById("pageNum");
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var txt = "";
                    var newsList = JSON.parse(xmlhttp.responseText);
                    for(var i=0;i<newsList.length;i++){
                        txt += "<div class=\"news\">" +
                            "<div class=\"img\">" + newsList[i].img + "</div>";
                        txt += "<a href=\"/" + newsList[i].id + "\">" + newsList[i].title + "</a>";
                        txt += "<p class=\"preview\">" + newsList[i].preview + "</p>";
                        txt += "<div class=\"time\">" + formatDate(new Date(newsList[i].publicationdate)) + "</div>" +
                            "</div>";
                    }
                    $("#pageNum").before(txt);
                    if(pageNum.value<[[${totalPages}]]){
                        pageNum.value = parseInt(pageNum.value) + 1;
                    }else{
                        $("#loadmore").remove();
                        $("#pageNum").before("没有更多了");
                    }
                }
            }
            xmlhttp.open("GET","/loadmorelabel?pageNum="+pageNum.value+"&label="+[[${label}]],true);
            xmlhttp.send();
        }
        /*]]>*/
    </script>
</head>

<body align="center">
    <div th:include="header"></div>
    <div th:if=${session.user!=null} th:include="foryou"></div>
    <div style="height: 50px">将内容下移</div>
    <div class="news" th:text="'当前位置：首页>'+${label}"></div>
    <div class="news" th:each="n : ${News}">
        <div class="img" th:utext="${n.img}"></div>
        <a th:href="@{'/'+${n.id}}" th:text="${n.title}">标题</a>
        <p class="preview" th:utext="${n.preview}"></p>
        <div class="time" th:text="${#dates.format(n.publicationdate,'yyyy-MM-dd HH:mm')}">时间</div>
    </div>
    <input id="pageNum" type="hidden" value="1">
    <br/>
    <button id="loadmore" onclick="loadmore()">浏览更多</button>
    <div th:include="footer"></div>
</body>
</html>
